<template>
  <div class="learningProgress-list-container">
    <div class="breadcrumb-wrapper">
      <el-breadcrumb separator="Ξ">
        <el-breadcrumb-item to="/"><a>首页</a></el-breadcrumb-item>
        <el-breadcrumb-item v-for="(item, index) in breadcrumbItem" :key="index">
          <a>{{ item.name }}</a>
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <div v-if="centerType" class="back-button-wrapper">
      <el-button size="mini" class="back-button" @click="backClick" icon="el-icon-back" type="warning">
        返回
      </el-button>
    </div>

    <div class="list-content-wrapper">
      <div class="list-content">
        <div
          class="list-item"
          v-for="(item, idx) in dataList"
          :key="item.id || idx"
          @click.stop="toDetail(item)"
        >
          <img class="course-cover" :src="item.courseCoverImageUrl" alt="课程封面" />
          <div class="item-info">
            <div class="item-title">{{ item.title || '课程名称缺失' }}</div>
            <div class="progress-section">
              <div class="progress-bar-wrapper">
                <el-progress
                  :percentage="calcProgress(item)"
                  :stroke-width="10"
                  :text-inside="false"
                  color="#3ECF8E"
                  status="active"
                  :show-text="false"
                />
              </div>
              <div class="progress-text">
                {{ item.userOverallProgress }} / {{ item.courseOverallLength }}
              </div>
            </div>
          </div>
        </div>
      </div>

      <el-pagination
        class="list-pagination"
        background
        :pager-count="7"
        :page-size="pageSize"
        :page-sizes="pageSizes"
        :total="total"
        layout="total, prev, pager, next, sizes, jumper"
        @current-change="curChange"
        @size-change="sizeChange"
      />
    </div>
  </div>
</template>


<script>
export default {
  data() {
    return {
      breadcrumbItem: [{ name: '学习进度' }],
      dataList: [],
      total: 0,
      pageSize: 8,
      pageSizes: [8, 16, 24, 40],
      centerType: false,
    };
  },
  created() {
    if (this.$route.query.centerType) this.centerType = true;
    this.getList(1);
  },
  methods: {
    getList(page = 1) {
      const token = localStorage.getItem('frontToken');
      const params = {
        page,
        limit: this.pageSize,
        sort: 'id',
        order: 'desc',
      };
      const endpoint = this.centerType
        ? 'learningprogress/myOverallProgresses'
        : 'learningProgress/list';
      this.$http
        .get(endpoint, {
          params,
          headers: { Authorization: `Bearer ${token}` },
        })
        .then((res) => {
          if (res.data.code === 0 && Array.isArray(res.data.data)) {
            this.dataList = res.data.data;
            this.total = this.dataList.length;
          } else {
            this.$message.error(res.data.msg || '获取数据失败');
          }
        })
        .catch(() => {
          this.$message.error('服务请求失败');
        });
    },
    calcProgress(item) {
      if (!item.courseOverallLength || item.courseOverallLength === 0) return 0;
      return Math.min(
        Math.round((item.userOverallProgress / item.courseOverallLength) * 100),
        100
      );
    },
    curChange(page) {
      this.getList(page);
    },
    sizeChange(size) {
      this.pageSize = size;
      this.getList(1);
    },
    toDetail(item) {
      const query = { courseId: item.courseId || item.id }; // 根据你接口字段名调整
      if (this.centerType) query.centerType = 1;
      this.$router.push({ path: '/index/learningProgressDetail', query });
    },

    backClick() {
      this.$router.push({ path: '/index/center' });
    },
  },
};
</script>

<style scoped lang="scss">
.learningProgress-list-container {
  background: #f5f7fa;

  .breadcrumb-wrapper {
    padding: 20px 7%;
    background: #ffffff;
    border-bottom: 1px solid #e0e0e0;
  }

  .back-button-wrapper {
    padding: 10px 7%;
    background: #ffffff;
    border-bottom: 1px solid #e0e0e0;
  }

  .list-content-wrapper {
    padding: 40px 7%;

    .list-content {
      display: flex;
      flex-direction: column;
      gap: 24px;

      .list-item {
        display: flex;
        align-items: center;
        background: #ffffff;
        border-radius: 16px;
        padding: 20px;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
        transition: all 0.3s ease;
        cursor: pointer;

        &:hover {
          transform: translateY(-4px);
          box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);
        }

        .course-cover {
          width: 140px;
          height: 100px;
          object-fit: cover;
          border-radius: 12px;
          margin-right: 24px;
          box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
          background-color: #f0f0f0;
        }

        .item-info {
          flex: 1;
          display: flex;
          flex-direction: column;
          justify-content: center;
          gap: 16px;

          .item-title {
            font-size: 20px;
            font-weight: 700;
            color: #2c3e50;
            line-height: 1.4;
          }

          .progress-section {
            display: flex;
            align-items: center;
            gap: 12px;

            .progress-bar-wrapper {
              width: 65%;
            }

            /deep/ .el-progress-bar__outer {
              border-radius: 8px;
              background: #eaeaea;
              height: 10px !important;
            }

            /deep/ .el-progress-bar__inner {
              border-radius: 8px;
              background-image: linear-gradient(90deg, #3ECF8E, #3AA1FF) !important;
            }

            .progress-text {
              font-size: 14px;
              color: #606266;
              font-weight: 500;
              min-width: 80px;
              text-align: right;
            }
          }

        }
      }
    }

    .list-pagination {
      margin-top: 40px;
      text-align: center;
    }
  }

  .back-button {
    background-color: #fceccf;
    border: none;
    color: #333;
    border-radius: 6px;
    padding: 8px 14px;
    font-size: 14px;
  }
}
</style>
